<template>
  <view class="order">
  <!-- 订单状态 -->
  <view class="order-state">
    <text>订单状态:{{order_state}}</text>
  </view>
  
  <!-- 订单中的商品 -->
  <view class="order-goods">
    <view v-for="(goods,i) in goodsList" :key="i">
      <my-goods :goods="goods" :showCount="true"></my-goods>
    </view>
  </view>
  
  <!-- 订单细节 -->
  <view class="order-detail">
    <view>商品总价</view>
    <view class="fee">￥{{total_price | tofixed}}</view>
  </view>
  
  <view class="order-detail">
    <view>运费</view>
    <view class="fee">￥{{deliver_fee | tofixed}}</view>
  </view>
  
  <view class="order-detail real-payment">
    <view>实付款</view>
    <view class="fee">￥{{total_price + deliver_fee | tofixed}}</view>
  </view>
  
  <view class="order-detail">
    <view class="receive-information-left">收货信息:</view>
    <view class="receive-information-right">{{receive_information}}</view>
  </view>
  
  <view class="order-detail">
    <view>订单编号</view>
    <view>{{order_id}}</view>
  </view>
  
  <view class="order-detail">
    <view>创建时间：</view>
    <view>{{create_time}}</view>
  </view>
  
  <view class="order-detail">
    <view>支付时间：</view>
    <view>{{pay_time}}</view>
  </view>
  
  <view class="order-detail">
    <view>发货时间:</view>
    <view>{{deliver_time}}</view>
  </view>
  
  <view class="order-detail receive-time">
    <view>收货时间:</view>
    <view>{{receive_time}}</view>
  </view>
  
  <view class="connect-us order-detail">
    <text>对订单抱有疑问？</text>
    <view class = "connect-us-button" @click="goToQRCode">联系我们</view>
  </view>
  
  </view>
</template>

<script>
import order from '../../store/order';
  export default {
    data() {
      return {
        // 请求参数对象，测试用
        queryObj:{
          // 上面两个参数测试用，无意义
          query:'',
          cid:6,
          // 页面索引
          pagenum:1,
          // 每页长度
          pagesize:5,
          // 订单种类
          order_state:'',
          // 订单总价
          total_price:100,
          // 运费
          deliver_fee:10,
        },
        
        // 该订单的商品列表
        goodsList:[],
        
        // 虚假的值
        order_id:"ASDWHd123",
        total_price:100,
        deliver_fee:10,
        order_state:'toPay',
        // 订单创建时间(到现在多少秒)
        create_time:"2020-04-18 16:51:56",
        // 订单支付时间(到现在多少秒)
        pay_time:"2020-04-18 16:51:56",
        // 订单发货时间(到现在多少秒)(先空在这，后面先后台系统手动改)
        deliver_time:"2020-04-18 16:51:56",
        // 订单完成时间(收货时间，先空在这)
        receive_time:"2020-04-18 16:51:56",
        // 收货信息
        // 收货人,电话号码,地址
        receive_information:"陈付睿,123456789,湖南省 长沙市 天心区 文源街道 中南大学铁道学院",
      };
    },
    
    onLoad(options){
      this.getOrderDetail(options.order_id)
    },
  
    methods:{
      async getOrderDetail(order_id){
        // 拿个假数据
        const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        
        this.goodsList = res.message.goods
        
        // 加假数据
        this.goodsList[0].goods_count = 1
      },
      
      // 点击联系我们后出现二维码
      goToQRCode(){
        uni.navigateTo({
          url:'/subpkg/QRcode/QRcode'
        })
      }
    },
    
    filters:{
      // 将价格显示为两位小数
      tofixed(num){
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
  

  .order-state{
    padding:5px 10px;
  }
  
  .order-goods{
    background-color: #F7F7F7;
  }
  
  .order-detail{
    display: flex;
    justify-content: space-between;
    padding:7px 10px;
    
    .fee{
      font-weight: bold;
    }
    
    .receive-information-right{
      width: 70%;
    }
  }
  
  .real-payment{
    border-bottom: 1px solid #F7F7F7;
    color:#C00000;
  }

  .receive-time{
    border-bottom: 1px solid #F7F7F7;
  }
  
  .connect-us{
    .connect-us-button{
      border:2rpx solid #66ccff;
      padding:10rpx 30rpx;
      border-radius: 30rpx;
    }
  }

Page {
        background-Color: #FFFFFF;
    }

</style>
